<!-- 第四个tarbar页面 -->
<template>
	<view class="body">

		<!--头部，登录或者非登录界面 （ 没有登录的逻辑）-->
		<view class="topShow">

			<loginModal-bar class="loginModal" @to-login='tologing1()' v-if="showGray"
				:showModal='showModal'></loginModal-bar>

			<view class="src-user">
				<view class="pic-left">
					<image v-if="isLogining && UserMsgList.avatarurl" :src="UserMsgList.avatarurl" class="user-pic" @click="goToPersonMsg">
					</image>
					<image v-else :src="userPic1" class="user-pic"></image>
				</view>

				<!--头像右侧区域start-->
				<view class="login-right">
					<view class="login-right-top">
						<button class="login-button" v-if="!isLogining" @click="tologing">立即登录</button>
						<view class="credit" v-else @click="goToPersonMsg">{{UserMsgList.nickname}}</view>
					</view>

					<view class="login-right-btm" v-if="isLogining">
						<view class="openPlus" v-if="memberMsg.isActive==0">开通Plus</view>
						<view class="openPlusRed" v-else>Plus</view>

						<view class="jifen-contain" v-show="isLogining">
							<image src="../../static/stars.png" class="jifen-pic"></image>
							<view class="jifen">{{UserMsgList.points}}</view>
						</view>

						<view class="person" v-show="isLogining" @click="goToPersonMsg">
							<text style="white-space: nowrap;">个人主页</text>
							<uni-icons type="right" size="1rem"></uni-icons>
						</view>
					</view>

				</view>
				<!--头像右侧区域start-->
			</view>

			<!--头部，登录或者非登录界面 （ 没有登录的逻辑）end-->

			<!--头部，登录或者非登录界面 （ 登录的逻辑）start-->

			<!--头部，登录或者非登录界面 （ 登录的逻辑）end-->
		</view>
		<!-- 除了上方头像区域，下面都在这里start -->
		<view class="bottomShow">

			<!-- 记录页面start -->
			<view class="record-container">
				<view class="recordText">记录</view>

				<view class="kindOf">
					<view class="kind"
						@click="gotoUrl(`/pages/produce_pazel/produce_pazel?id=${this.$store.state.userInfo.id}`)">
						<image class="kindImg" src="../../static/首页-2.png"></image>
						<view class="kindText">出题</view>
					</view>
					<view class="kind" @click="gotoUrl('/pages/mine/gameHistory')">
						<image class="kindImg" src="../../static/概览-2.png"></image>
						<view class="kindText">答题</view>
					</view>
					<view class="kind" @click="gotoUrl('/pages/mine/history')">
						<image class="kindImg" src="../../static/学习计划.png"></image>
						<view class="kindText">浏览</view>
					</view>
					<view class="kind" @click="gotoUrl('/pages/index/search')">
						<image class="kindImg" src="../../static/搜索-2.png"></image>
						<view class="kindText">搜索</view>
					</view>
				</view>
			</view>
			<!-- 记录页面end -->

			<!--书架页面start-->
			<view class="shujia-all">

				<view @click="gotoUrl('/pages/myBookList/myBookList')">
					<text>书架</text>
					<uni-icons type="right" size="1rem"></uni-icons>
				</view>

				<!--书架内容-->
				<swiper class="book-container" circular :autoplay="true" vertical :interval="2000">

					<swiper-item v-for="(item,index) in getBookLibary" :key="index">
						<view class="showBook"
							@click="gotoUrl(`/pages/booksPages/booksPages?item=${JSON.stringify(item.book)}`)">
							<!--如果有书，则获取书的内容展示-->
							<image class="showBookImg" :src="item.book.bookImg"></image>
							<view class="showBookMsg">
								<view class="bookTitle">
									{{item.book.bookName}}
								</view>
								<view class="bookIntro">
									<text>继续阅读</text>
									<u-icon name="arrow-right-double" color="rgb(102, 102, 102)" size="1rem"></u-icon>
								</view>
							</view>
						</view>
					</swiper-item>

					<!--如果没有书，则展示前往搜索href-->
					<swiper-item v-if="getBookLibary.length == 0">
						<view style="display: flex; align-items: center; justify-content: center; height: 100%;">
							<view style="color: #888; font-weight: 200; font-size: 0.8rem;">书架是空的，去找找喜欢的书吧~</view>
							<view class="SearchBook" v-if="false">
								<view class="ifNoBookShow">
									<text class="ifNoBookShowText">4万＋中英文经典-></text>
									<view class="BookShowList">
										<image class="ifNoBookShowImg" :src="img1"></image>
										<image class="ifNoBookShowImg1" :src="img"></image>
									</view>
								</view>
							</view>
						</view>
					</swiper-item>
				</swiper>

			</view>
			<!--书架页面end-->

			<!--轮播图展示start-->
			<view class="uni-margin-wrap gray">
				<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay"
					:interval="interval" :duration="duration">
					<swiper-item v-for="(item,index) in activityShow" :key="index">
						<view class="swiper-item uni-bg-red">
							<image :src="item"></image>
						</view>
					</swiper-item>

				</swiper>
			</view>
			<!--轮播图展示end-->

		</view>

		<!-- 除了上方头像区域，下面都在这里end -->

	</view>

</template>

<script>
	import {
		uNoticeBar,

	} from 'uview-ui/components/u-icon/u-icon.vue'

	import {
		gotoUrl
	} from "@/utils.js"
	import loginModalBar from 'pages/models/loginModal/loginModal.vue'
	import {
		wxlogin,
		getUserInfo, //获取用户信息
		setUserInfo, //更改用户信息
		ifMember, //是否会员
		checkUserShelf, //条件查询用户书架中书籍
	} from '@/config/api.js'


	export default {
		components: {
			'loginModal-bar': loginModalBar,
			uNoticeBar,
		},
		data() {
			return {
				// 轮播图的效果start
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				// 轮播图的效果end



				gotoUrl, //连接跳转
				credit: 0,
				jifen: 30,
				bookList: [],
				isLogining: false,

				//登录成功
				userPic2: '../../static/stars.png',

				//登录失败
				userPic1: '../../static/user (2).png',

				id: -1,
				wxtoken: '',
				dataPer: {}, //url和昵称信息

				UserMsgList: {},

				showLoginModal: false, //是否展示登录 的那个模态弹窗

				showGray: false, //当 登录窗口弹出时 是否显示 灰色遮罩层

				memberMsg: {}, //会员信息

				getBookLibary: [], //书架的书籍信息

				activityShow: [
					'https://sprtlias.oss-cn-hangzhou.aliyuncs.com/194dccfe-522f-4998-8982-213c6e35b46d.jpg',

				],
				imageData: '',
				imageData: '',
				img1: "https://sprtlias.oss-cn-hangzhou.aliyuncs.com/76aaae6e-3311-4b8e-bc9d-358c4c3f9faf.jpg",
				img: 'https://sprtlias.oss-cn-hangzhou.aliyuncs.com/50506e89-91a6-42cf-a00f-f613df97de2a.jpg'
			}
		},
		mounted() {},

		onLoad() {

			const token1 = uni.getStorageSync('token');
			if (token1) {
				//自动登录
				this.tologing1(2, 2) //随便写，自动登录
			}

			const savedTime = uni.getStorageSync('timestamp');
			if (savedTime) {
				const currentTime = new Date().getTime();
				const elapsedTime = (currentTime - savedTime) / (1000 * 60 * 60); // 计算时间间隔（小时为单位）

				if (elapsedTime >= 2) {
					// 执行过了两个小时后的逻辑
					console.log("超过两个小时");
					// 进行相应操作
				} else {
					// 执行未过两个小时的逻辑
					console.log("未超过两个小时");
					// 进行相应操作


					var data = {}

					const token1 = uni.getStorageSync('token');
					var wxtoken = token1.replace(/"/g, '')
					console.log("全局获取---》缓存token成功---", wxtoken)
					data.wxtoken = wxtoken


					this.$store.commit('setUserInfo', data);
					this.getUserMsg()
					if (wxtoken != '') {
						this.isLogining = true;
					}
					console.log("id=" + this.$store.state.userInfo.wxtoken)
				}
			} else {
				// 未存储时间戳的情况，可能是第一次启动应用
				console.log("无时间戳记录");
			}




			this.fetchBookLibary() //抓取书架的书
			this.getUserMsg()
		},
		onLaunch() {
			var data = {}

			const token1 = uni.getStorageSync('token');
			var wxtoken = token1.replace(/"/g, '')
			console.log("全局获取---》缓存token成功---", wxtoken)
			data.wxtoken = wxtoken
			this.$store.commit('setUserInfo', data); // 将数据保存到store中,wxtoken

			if (token1) {

				this.isLogining = true;

				this.getUserMsg()
			}
			this.getUserMsg()
		},
		created() {
			this.getUserMsg()
			this.getIfMember() //是否会员
			this.fetchBookLibary() //抓取书架的书
			this.fetchThe60Pic() //抓取那个图片，每日新闻
		},
		methods: {

			//跳转获取图片
			goto(url1) {
				//需要跳转的外部路径
				let url = url1
				uni.navigateTo({
					url: '/pages/webview/webview?url=' + url1
				})
			},
			//抓取书架的书
			async fetchBookLibary() {
				var data = {}
				data.isOrder = 0
				const res = await checkUserShelf(data)

				console.log("书架的书籍BookLibary==msg=>" + JSON.stringify(res))
				// this.getBookLibary = JSON.parse(JSON.stringify(res))
				this.$set(this, 'getBookLibary', JSON.parse(JSON.stringify(res)));
				console.log("this.getBookLibary--->" + this.getBookLibary)
			},
			async getIfMember() {
				const res = await ifMember()
				console.log("抓取到的会员信息member==msg=>" + JSON.stringify(res))
				this.memberMsg = JSON.parse(JSON.stringify(res))
			},

			//获取用户信息
			async getUserMsg() {
				var that = this
				try {
					let res = await getUserInfo();
					// 使用await等待异步函数的执行结果
					//将日期转换为字符串
					this.UserMsgList = res; // 将结果赋值给UserPuzzleList
					console.log(res)

					console.log(JSON.stringify(this.UserMsgList));

					// 在组件中调用
					const data = {
						id: this.UserMsgList.id
					};

					// 获取当前的 userInfo 对象
					const currentUserInfo = this.$store.state.userInfo;

					// 更新 userInfo 对象
					const updatedUserInfo = {
						...currentUserInfo,
						...data
					};

					// 提交更新后的 userInfo 对象
					this.$store.commit('setUserInfo', updatedUserInfo);

				} catch (error) {
					console.error('Error fetching user-msg list->', error);
				}


				this.getIfMember() //是否会员
				this.fetchBookLibary() //抓取书架的书
			},

			//跳转到 我的更多信息 页面
			goToPersonMsg() {
				uni.navigateTo({
					url: `/pages/userhome/userhome?id=${this.$store.state.userInfo.id}`
				});
			},
			//子组件调用父组件的函数start
			async tologing1(url, nickname) {

				let _this = this;
				this.showGray = false //不展示遮罩层

				//发送函数，更改用户头像和昵称
				_this.dataPer.avatarurl = url
				_this.dataPer.nickname = nickname

				console.log("url,nickname--->" + url, nickname)
				// 拿到子组件传递的 头像 和 昵称 进行登录
				wx.login({
					success: async (res) => {
						if (res.code) {
							_this.code = res.code;
							const params = {
								code: res.code,
								avatarurl: _this.dataPer.avatarurl,
								nickname: _this.dataPer.nickname
							}
							try {
								const data = await wxlogin(params);
								console.log("成功res.data" + JSON.stringify(data))
								const currentTime = new Date().getTime() // 获取当前时间戳

								uni.setStorageSync('timestamp', currentTime);
								const token = uni.setStorageSync('token', JSON.stringify(data.wxtoken));
								console.log("全局缓存token成功---")

								this.$store.commit('setUserInfo', data); // 将数据保存到store中,wxtoken
								console.log("store-wxtoken" + JSON.stringify(this.$store.state
									.userInfo)); // 打印userInfo

								if (!this.isLogining) {
									uni.reLaunch({
										url: '/pages/mine/mine'
									})
								}

								_this.isLogining = true
								_this.getUserMsg()


							} catch (error) {
								console.log("try WxLogin报错登录后台失败");
							}
						} else {
							console.log("请求code失败或code为空");
						}
					},
					fail: (error) => {
						console.log("wx.login调用失败", error);
					}
				});
			},
			//子组件调用父组件的函数end


			//登录函数
			tologing() {
				let _this = this;
				_this.showGray = true //展示遮罩层
			}
			//登录函数tologing--end
		}
	}
</script>

<style lang="scss" scoped>
	.topShow {
		flex-shrink: 0;
	}

	.bottomShow {
		width: 100%;
		flex-shrink: 0;
		//background-image: url('https://sprtlias.oss-cn-hangzhou.aliyuncs.com/831b8546-3170-4d6c-9cdc-a7c9f31f9d92.jpg') ;
		display: flex;
		flex-flow: column;
		gap: 0.7rem;
	}

	.uni-margin-wrap {
		border-radius: 20%;

	}

	.swiper {
		height: 320rpx;
		border-radius: 20%;
	}

	.swiper-item {
		border-radius: 20%;
		display: block;
		height: 350rpx;

		text-align: center;
		width: 100%;
		object-fit: fill;
		/* 使用 cover 属性让图片充满整个容器，保持原始比例并填充整个框 */
		background-position: top;
		margin-top: -70rpx;
	}

	.swiper-list {
		margin-top: 40rpx;
		margin-bottom: 0;
		border-radius: 20%;
	}

	.imgCtn {
		position: absolute;
		width: 200rpx;
		height: 200rpx;
		bottom: 20rpx;
		transform: translateY(500rpx);
		top: 300rpx;

	}

	.kind {
		width: 20%;
		padding: 24rpx 0;
		border-radius: 40rpx;
		background-color: rgb(241, 241, 241);
	}

	.kindImg {
		width: 1.5rem;
		height: 1.5rem;
	}

	.kindText {
		font-size: 0.8rem;
	}

	.kindOf {
		text-align: center;
		flex: 1;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		gap: 4%;
	}

	.recordText {
		font-weight: bold;
		margin: 0.7rem;
		font-size: 1.1rem;
	}

	.record-container {
		width: 95%;
		margin: auto;
		border-radius: 1rem;
		display: flex;
		flex-direction: column;
		padding-bottom: 0.6rem;
		background-color: white;
	}

	.SearchBook {
		width: 80%;
		background-color: rgb(241, 241, 241);
		height: 200rpx;
		margin: 10rpx auto;
		border-radius: 20rpx;

	}

	.ifNoBookShow {
		display: flex;
		flex-direction: row;

	}

	.ifNoBookShowImg1 {
		position: absolute;
		margin-top: 20rpx;
		width: 120rpx;
		height: 150rpx;
		right: 10rpx;
		bottom: 0;
		z-index: 1;

	}

	.ifNoBookShowImg {
		margin-top: 20rpx;
		width: 150rpx;
		height: 180rpx;

		z-index: 2;
	}

	.ifNoBookShowText {
		flex: 1;
		text-align: center;
		line-height: 200rpx;
		color: black;
	}

	.BookShowList {
		position: relative;
		width: 250rpx;
		display: flex;
		flex-direction: row;


	}

	.nextRead {
		font-size: 0.9rem;
	}

	.bookIntro {
		display: flex;
		align-items: center;
		font-size: 0.9rem;
		text-overflow: ellipsis;
		overflow: hidden;
		margin-top: 20rpx;
		color: rgb(102, 102, 102);
	}

	.BookTitle {
		font-size: 1.3rem;
		font-weight: bold;
	}

	.showBookImg {
		flex: 0.7;
		padding: 20rpx;
		max-width: 100%;
		/* 图片最大宽度为其容器的100% */
		height: auto;
		/* 高度自适应，保持原始宽高比 */
	}

	.showBookImg1 {
		width: 50%;
		box-sizing: border-box;
		/* 包含 padding 和 border 在内的
		padding: 20rpx;
		max-width: 100%;
		
		/* 图片最大宽度为其容器的100% */
		height: auto;
		/* 高度自适应，保持原始宽高比 */
		height: 300rpx;

		padding: 30rpx;

	}

	.showBookMsg {
		display: flex;
		flex-flow: column;
		justify-content: center;
		flex: 1.3;
		padding: 0 1.5rem;
	}

	.showBook {
		padding: 20rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: row;
		width: 100%;
		height: 100%;
	}

	.showBook1 {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		height: 270rpx;
		margin-bottom: 20rpx;
	}

	.shujia-all {
		width: 95%;
		margin: auto;
		border-radius: 1rem;
		background-color: white;
		height: 360rpx;
		display: flex;
		justify-content: space-between;
		flex-direction: column;
		z-index: 0;
		overflow: scroll;
	}

	.shujia-all>view:first-child {
		display: flex;
		justify-content: space-between;
		font-weight: bold;
		margin: 0.7rem;
		font-size: 1.1rem;
	}

	.book-container {
		z-index: 0;
		flex: 1;
		overflow: scroll;
	}

	.bds {}

	.showGray {
		background-color: rgb(102, 102, 102);
	}

	.loginModal {
		z-index: 1;
		position: absolute;
		/* 		bottom: 0; */
		left: 50%;
		width: 100%;
		height: 100%;
		/* background-color: white; */
		border-radius: 40rpx 0 40rpx 0;
		transform: translateX(-50%);
	}

	.pic-nologin {
		left: 150rpx;
		object-fit: contain;
		width: 120rpx;
		height: 120rpx;
		margin-left: 100rpx;
		margin-top: 30rpx;
	}

	.login-button--down {
		display: flex;
		align-items: center;
		margin-top: 10px;
		transition: transform 0.2s;
		box-shadow: inset -5px 5px 10px rgba(254, 134, 180, 0.5);
	}

	.login-button--down:active {
		transform: translateY(2px);
	}

	.blank {
		flex: 0.2;
	}

	.jifen-contain {
		align-items: center;
		border-radius: 0.3rem;
		background-color: #F1DFE6;
		flex: 1;
		display: flex;
		flex-direction: row;
		width: 30rpx;
		height: 100%;
		box-shadow: inset -5px 5px 10px rgba(255, 183, 215, 0.5);
	}



	.jifen {
		flex: 1;
		color: #FE2D75;

	}

	/* rgb(243,215,227) */
	.openPlusRed {
		padding-left: 30rpx;
		background-color: rgba(250, 103, 154, 0.8);
		color: white;
		font-weight: bold;
		flex: 1;
		border-radius: 0.3rem;
		box-shadow: inset 2rpx 2rpx 10px rgba(250, 103, 154, 0.8);
	}

	.openPlus {
		padding-left: 30rpx;
		background-color: #CCCCCC;
		color: white;
		flex: 1;
		border-radius: 0.3rem;
		box-shadow: inset -5px 5px 10px rgba(139, 140, 138, 0.5);
	}

	.jifen-view {
		flex: 1;
		box-shadow: inset 2rpx 2rpx 10px rgba(250, 103, 154, 0.8);
	}

	.person {
		flex: 1;
		float: right;
		display: flex;
		justify-content: center;
	}

	.login-right-btm {
		justify-content: space-around;
		display: flex;
		gap: 24rpx;
	}

	.jifen-pic {
		padding-left: 30rpx;
		width: 30rpx;
		height: 30rpx;
	}

	.credit {
		flex: 1;
	}

	.login-right-top {
		justify-content: space-around;
		display: flex;
	}

	.login-right {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 20rpx;
		padding-right: 20rpx;
	}

	.login-button {
		margin-left: -30rpx;
		margin-right: 10rpx;
		background-color: #D4237A;
		color: white;
		font-weight: bold;
		width: 220rpx;
		height: 50rpx;
		align-items: center;
		display: flex;
		justify-content: center;


	}

	.src-user {
		width: 100%;
		/* height: 200rpx; */

		display: flex;
		background: linear-gradient(to bottom, #eee3c9, #f5f5f5);
		padding-bottom: 40rpx;
	}

	.user-pic {
		object-fit: contain;
		width: 100rpx;
		height: 100rpx;
		margin: 0 40rpx;
		display: block;
	}

	.body {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 100%;
		overflow-y: auto;
	}
</style>